<template>
<!-- 固定分页面 -->
  <div class="box">
    <div class="integralD_top">
      <span class="left">{{data_time}}</span>
      <span
        class="right"
        style="width:20px;display:inline-block"
        @click="showTime"
      >
        <img
          style="width:100%"
          src="@/static/img/icon/日历.png"
        >
      </span>
    </div>
    <div class="integralD_top_title">
      <p>固定分</p>
      <p v-if="list.length==0">0</p>
      <p v-else>{{list.codeG}}</p>
    </div>
    <div class="integralD_branch" v-for="(item,i) in list.fiexedList" :key="i">
      <span class="left ellipsis">{{item.event_name}}</span>
      <!-- <span></span> -->
      <span class="right">{{item.code_b}}分</span>
    </div>
      <van-popup
            v-model="time"
            :safe-area-inset-bottom="true"
            :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
            :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
          >
          <van-datetime-picker
             v-model="currentDate"
             type="year-month"
             :min-date="minDate"
             :max-date="maxDate"
              @confirm="getTime"
              @cancel="showEnd"
           />
           
          </van-popup>
  </div>
</template>

<script type="text/javascript">
import { Popup,DatetimePicker } from "vant";
export default {
  data() {
    return {
      list:[],
      data_time:'',
      time:false,
      minDate: new Date(2018, 0),
      maxDate: new Date(),
      currentDate: new Date(),
      people_userId:0
    };
  },
  components: {
    [DatetimePicker.name]:DatetimePicker,
    [Popup.name]:Popup
  },
  created(){
    this.dataTime();
    dd.biz.navigation.setTitle({
      title: "我的固定分" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods:{
    /**
     * rfj
     * 固定分
     */
    showEnd(){
      this.time=false;
      this.currentDate = new Date();
    },
    showTime(){
      this.time=true;
    },
      getTime(time){
      const d = new Date(time)
      let yy=d.getFullYear();
      let mm = this.p((d.getMonth() + 1));
      const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1));
      this.data_time=resDate;
      this.getFixedSubDetails(resDate);
      this.time=false;
    },
     p(s) {
          return s < 10 ? '0' + s : s
    },
     dataTime(){
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
       let month ;
      if(mm<10){
        month = "0" + mm 
      }else{
        month=mm
      }
      let year = yy + "-" + month;   
      this.data_time= year;
      this.getFixedSubDetails(year);         
    },
     async getFixedSubDetails(year) {
      let userId = localStorage.getItem("userId");
        let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
       let yy = year.split('-')[0];
       let mm = year.split('-')[1];
      const res = await this.$http.get(
        `yuepoints/fixedSubDetails?corpId=${corpId}&userId=${userId}&year=${yy}&month=${mm}`
      );
      this.list = res.data.data;
    },
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 16px;
  p {
    margin: 0px;
    padding: 0px;
  }
  .integralD_top {
    padding: 0px 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #c0c0c059;
    color: #0072ffe0;
    background: #fff;
  }
  .integralD_top_title {
    padding: 50px 0px;
    background: #fff;
    border-bottom: 1px solid #c0c0c059;
  }
  .integralD_branch {
    height: 45px;
    line-height: 45px;
    background: #fff;
    padding-left: 15px;
    border-bottom: 1px solid #c0c0c059;
    // border-top: 1px solid #c0c0c059;
    span:last-child {
      margin-right: 10vw;
    }
  }
  .ellipsis{
    text-align: left;
    width: 60%;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .left {
    float: left;
    
  }
  .right {
    float: right;
  }
}
</style>
